<template>
  <section>
    <ym-query-view params="form"
                   :model="form"
                   @search="handlerSearch">
      <el-form inline
               label-position="right"
               label-width="130px">
        <el-form-item label="购入时间">
          <el-date-picker v-model.trim="form.购入时间"
                          type="daterange"
                          clearable
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="过期时间">
          <el-date-picker v-model.trim="form.过期时间"
                          type="daterange"
                          clearable
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-select v-model.trim="form.nodetype"
                     clearable>
            <el-option v-for="(item,index) in nodetypeOpts"
                       :key="index"
                       :label="item.namecode"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡券">
          <el-select v-model.trim="form.卡券"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in couponOpts"
                       :key="index"
                       :label="item.couponTitle"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </ym-query-view>

    <el-tabs type="border-card"
             v-model="activeName"
             @tab-click="tabClick">
      <el-tab-pane :name='String(item.id)'
                   :label="item.namecode"
                   v-for="item in typeOpts"
                   :key="item.id">
        <member-table v-if="activeName == 20803"
                      :loading="loading"
                      :data="data"
                      :total='total'
                      :filterAnd="filterAnd"
                      :currentPage="currentPage"
                      :size="size"
                      @load="getList"
                      :type='20803'></member-table>
        <specifically-table v-if="activeName == 20802"
                            :loading="loading"
                            :data="data"
                            :total='total'
                            :filterAnd="filterAnd"
                            :currentPage="currentPage"
                            :size="size"
                            @load="getList"
                            :type='20802'></specifically-table>
        <discount-table v-if="activeName == 20801"
                        :loading="loading"
                        :data="data"
                        :total='total'
                        :filterAnd="filterAnd"
                        :currentPage="currentPage"
                        :size="size"
                        @load="getList"
                        :type='20801'></discount-table>
        <special-table v-if="activeName == 20804"
                       :loading="loading"
                       :data="data"
                       :total='total'
                       :filterAnd="filterAnd"
                       :currentPage="currentPage"
                       :size="size"
                       @load="getList"
                       :type='20804'></special-table>
      </el-tab-pane>
      <!-- <el-tab-pane name='100408'
                   label="积分卡">
        <score-table :loading="loading"
                     :data="data"
                     :total='total'
                     :filterAnd="filterAnd"
                     :currentPage="currentPage"
                     :size="size"
                     @load="getList"
                     :type='100408'></score-table>
      </el-tab-pane> -->
    </el-tabs>

  </section>
</template>
<script>
import { cloneDeep } from 'lodash'
import { paramsFilter } from '@/utils/params-filter'
import queryMixins from '@/views/mixins/query'
import dayjs from 'dayjs'
import { accMul, accDiv } from '@/utils/calculate'
let COLUMNS = new Map([
  [20801, ['消费折扣', '金额', '门店', "门店:名称|id 门店信息", '有效天数', '创建日期']],
  [20802, ['金额', '售卖价', '门店', "门店:名称|id 门店信息", '有效天数', '创建日期']],
  [20803, ['金额', '消费折扣', '有效天数']],
  [20804, ['有效天数', '金额', '门店', "门店:名称|id 门店信息"]],
  [100408, ['兑换现金比', "兑换限额", '金额', '适用门店']]
])
export default {
  mixins: [queryMixins],
  components: {
    discountTable: () => import('./component/discount-table.vue'),
    specificallyTable: () => import('./component/specifically-table.vue'),
    memberTable: () => import('./component/member-table.vue'),
    specialTable: () => import('./component/special-table.vue'),
  },
  data () {
    return {
      activeName: '20801',
      busiName: 'CardVoucherUsers',
      typeOpts: [],
      couponOpts: []
    }
  },
  async mounted () {
    let { tabs } = this.$route.query
    this.nodetypeOpts = await this.$store.dispatch('options/getOptions', { busiName: this.busiName, rela: 219 })
    this.typeOpts = await this.$store.dispatch('options/getOptions', { busiName: this.busiName, rela: 208 })
    this.typeOpts = this.typeOpts.filter(e => [20801, 20802, 20803, 20804].includes(Number(e.id))).sort((a, b) => {
      return a.id - b.id
    })
    this.activeName = String(this.typeOpts[0].id)
    this.storeOpts = await this.$store.dispatch('options/getStoreOptions')
    if (tabs) {
      this.activeName = tabs
    }
    this.getCouponList()
    this.handlerSearch()
  },
  methods: {
    getCouponList () {
      this.$command.execute({
        api: '/api/SelectByConds/CardVoucher',
        params: {
          index: 0,
          pageSize: 0,
        },
        data: {
          "CONDS": [],
          "ORDER": ['id DESC'],
          "COLUMNS": ['id', '名称 couponTitle']
        }
      }).then(res => {
        this.couponOpts = res.data
      })
    },
    tabClick (e) {
      let { userId } = this.$route.query
      let query = {}
      if (userId) {
        query.userId = userId
      }
      query.tabs = this.activeName
      if (Object.keys(this.form).length) {
        query.queryParams = JSON.stringify(this.form)
      }
      this.$router.replace({
        path: this.$route.path,
        query
      })
      this.handlerSearch(1)
    },
    handlerSearch (e) {
      let { userId } = this.$route.query
      let form = cloneDeep(this.form)
      form['卡类型'] = this.activeName
      if (userId) {
        form['用户'] = userId
      }
      this.filterAnd = paramsFilter(form, {
        rangeDate: ['购入时间', '过期时间']
      })
      if (this.selectStoreId) {
        this.filterAnd.push('适用门店', this.selectStoreId)
      }
      this.currentPage = 1
      if (!e && this.$route.query.page) {
        this.currentPage = Number(this.$route.query.page)
      }
      if (this.$route.query.size) {
        this.perPage = Number(this.$route.query.size)
      }
      this.getList()

    },
    getList (page, size) {
      this.currentPage = page || this.currentPage
      this.size = size || this.size
      this.loading = true
      this.$command.execute({
        api: `/api/SelectByConds/${this.busiName}`,
        params: {
          index: (Number(this.currentPage) - 1) * this.size,
          pageSize: this.size,
        },
        data: {
          "CONDS": [].concat(this.filterAnd),
          "ORDER": ['optdate DESC'],
          "COLUMNS": ["用户", "id", "剩余金额", "NodeType", "用户:用户名称 username", "卡券:消费折扣 消费折扣", "卡券:主图 主图", "卡券:金额 购入价", "适用门店:名称|id 适用门店", "卡券:名称 卡券名称", "剩余数量", "过期时间", "购入时间", "卡券:有效天数 有效天数"]
        }
      }).then(async res => {
        this.loading = false
        this.data = res.data.map(e => {
          e.主图 = e.主图 ? [e.主图] : []
          e.剩余金额 = e.剩余金额 ? accDiv(e.剩余金额, 100) : 0
          e.购入价 = e.购入价 ? accDiv(e.购入价, 100) : 0
          return {
            ...e
          }
        })
        this.total = await this.$store.dispatch('app/getPageTotal', { busiName: this.busiName, filterAnd: this.filterAnd })

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-btn {
  margin-bottom: 10px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px 15px;
}
</style>
